<template>
	<view>
	   <u-navbar back-icon-color='#ffffff' title=" " :border-bottom='false'  :background="background"></u-navbar>
	   <view class="boxs">
	   	<text>请填写你的车辆信息</text>
	   </view>
	   <view class="box2">
	<view class="data-tit">
	  	车牌号码
	  </view>
	  <f-plate @getReceive='getPlate'></f-plate>
	  
	  <view class="row mt-3">
	  	<text class="txt">车主姓名</text>
		<input class="inputs" type="text" placeholder="请输入车主姓名" />
	  </view>
	<view class="row">
		<text class="txt">车主手机</text>
		<input class="inputs" type="number" placeholder="请输入车主手机号" />
	</view>
	<view class="row">
			<input style="width: 350rpx;" type="number" placeholder="请输入验证码" />
			<text style="color: #0056B3;" class="txt">获取验证码</text>
	</view>
	<view class="row">
		<text class="txt">车身架号</text>
		<input class="inputs" type="number" placeholder="请输入车架号(非必填)" />
	</view>
	<view class="row">
		<text class="txt">发动机号</text>
		<input class="inputs" type="number" placeholder="请输入发动机号(非必填)" />
	</view>
	
	<view @click="getStep" class="next-step">
		确认
	</view>
		 
	   </view>
	   
	   
	</view>
</template>

<script>
	import fPlate from '@/components/f-plate/index.vue'
	export default {
		components:{fPlate},
		data(){
			return{
				background:{
					backgroundColor:'#007bf9',
				}
			}
		}
	}
</script>

<style lang="scss">
	
	page{
		background-color: #f3f4f9;
	}
   .boxs{
	   height:180rpx;
	   width:100%;
	   background-color: #007bf9;
	   font-size: 34rpx;
	   color: #FFFFFF;
	   font-weight: bold;
	   line-height: 180rpx;
	   padding-left: 30rpx;
   }
   .box2{
	   background-color: #FFFFFF;
	   padding: 30rpx 0;
	   .data-tit{
	   	  width: 700rpx;
	   	  height: 40rpx;
	   	  font-size: 35rpx;
	   	  font-weight: bold;
	   	  line-height: 40rpx;
	   	  margin:   auto;
	   	  display: flex;
	   	 
	   	  justify-content: space-between;
	   	  align-items: center;
	     }
	     .box{
	   	  width: 100%;
	   	  height: 100rpx;
	   	  padding: 0 40rpx;
	   	  display: flex;
	   	  align-items: center;
	   	  .plate-num{
	   		  width: 76rpx;
	   		  height: 95rpx;
	   		  border: 1px solid #C0C0C0;
	   		  border-radius: 10rpx;
	   		  margin-right: 10rpx;
	   		  display: flex;
	   		  align-items: center;
	   		  justify-content: center;
	   		  font-size: 32rpx;
	   		  font-weight: bold;
	   	  }
	   	  .plate-nums{
	   		  width: 76rpx;
	   		  height: 95rpx;
	   		  border: 1px solid #5B97CC;
	   		  border-radius: 10rpx;
	   		  display: flex;
	   		   flex-direction: column;
	   		  align-items: center;
	   		  justify-content: center;
	   		  color: #5B97CC;
	   		  font-size: 18rpx;
	   	  }
	   	.data-plate{
	   		  width: 160rpx;
	   		  height: 95rpx;
	   		  border: 1px solid #5B97CC;
	   		  border-radius: 10rpx;
	   		  display: flex;
	   		  align-items: center;
	   		  margin-right: 30rpx;
	   		  .data-tits{
	   			  // flex: 1;
	   			  width: 50%;
	   			  height: 80%;
	   			  border-right:1px solid #C0C0C0;
	   			  display: flex;
	   			  align-items: center;
	   			  justify-content: center;
	   			  font-size: 32rpx;
	   			  font-weight: bold;
	   		  }
	   		  .data-titt{
	   			  width: 50%;
	   			  height: 80%;
	   			display: flex;
	   			align-items: center;
	   			justify-content: center;
	   			font-size: 32rpx;
	   			font-weight: bold;
	   		  }
	   	}
	     }
	   
	   .row{
	   	height: 90rpx;
	   	width: 100%;
	   	border-bottom: 1px solid #F4F5F6;
	   	display: flex;
	        align-items: center;
	   	 justify-content: space-between;
	   	 padding: 0 20rpx;
	   	 // margin-top: 30rpx;
	   	 .txt{
	   		 font-size: 28rpx;
	   		 font-weight: bold;
	   	 }
	   	 .inputs{
	   		 width: 200rpx;
	   	 }
	   	 
	   }
	   
	   .next-step{
	   	width: 680rpx;
	   	height: 90rpx;
	   	border-radius: 30rpx;
	   	background:#007bf9;
	   	color: #FFFFFF;
	   	font-size: 32rpx;
	       text-align: center;
	   	line-height: 90rpx;
	   	margin: 30rpx auto;
	   }
   }
</style>